import React from 'react'
//引入样式
import '../../assets/index.css'
class TodoList extends React.Component {
    constructor() {
        super()
        //数据
        this.state = {
            todo: '',
            todoInfo: [
                {
                    id: 1,
                    name: '学习vue2',
                    done: true,
                    isEdit: false
                },
                {
                    id: 2,
                    name: '学习vue2',
                    done: true,
                    isEdit: false
                },
                {
                    id: 3,
                    name: '学习react',
                    done: false,
                    isEdit: false
                },
            ]
        }
    }
    //方法
    //得到添加的todo的数据
    addTodo(e) {
        this.setState({
            todo: e.target.value //获得input框的值
        })
        // console.log(this.state.todo);
    }
    //渲染得到的新的todo
    updateTodo(e) {
        if (e.keyCode === 13) {
            if (!this.state.todo.trim()) {
                alert('todo不能为空值')
            } else {
                let newTodo = {
                    id: Date.now(),
                    name: this.state.todo,
                    done: false,
                    isEdit: false
                };
                this.setState({
                    todoInfo: [...this.state.todoInfo, newTodo]
                })
                console.log(this.state.todoInfo);
                this.setState({
                    todo: ''
                })
            }
        }
    }
    //用id当锚点删除todo
    delTodo(id) {
        let newTodoInfo = this.state.todoInfo.filter(item => item.id != id)
        this.setState({
            todoInfo: newTodoInfo
        })
        // console.log(this.state.todoInfo);
    }
    //点击切换Todo的done状态
    changeDone(flag, id) {
        this.state.todoInfo.forEach(item => {
            if (item.id == id) {
                item.done = !flag
            }
        })
        // this.setState({
        //     todoInfo: newflag
        // })

    }

    //渲染
    render() {
        let { todo, todoInfo } = this.state;
        return (
            <div>
                <section className="todoapp">
                    <header className="header">
                        <h1>todos</h1>
                        <input className="new-todo" autoFocus autoComplete="off" placeholder="What needs to be done?"
                            type="text"
                            value={todo}
                            onChange={(e) => this.addTodo(e)}
                            onKeyDown={(e) => this.updateTodo(e)} />
                    </header>
                    <section className="main">
                        <input id="toggle-all" className="toggle-all" type="checkbox" />
                        <label htmlFor="toggle-all">Mark all as complete</label>
                        <ul className="todo-list">
                            {/* <!-- :className="{completed: item.done }" --> */}
                            <li className="todo">
                                {
                                    todoInfo.map((item, index, arr) =>
                                        <div key={item.id}>
                                            <div>
                                                <input className="toggle" type="checkbox" checked={item.done} onChange={() => this.changeDone(item.done, item.id)} />
                                                <label className={[!item.done ? '' : "Textcompleted"]}>{item.name}</label>
                                                <button className="destroy"
                                                    onClick={() => this.delTodo(item.id)}></button>
                                            </div>
                                            <input className="edit" type="text" style={{ display: 'none' }} />
                                        </div>
                                    )
                                }
                            </li>
                        </ul>
                    </section>
                    <footer className="footer">
                        <span className="todo-count"> <strong></strong> 1 item left </span>
                        <ul className="filters">
                            <li><a href="">All</a>
                            </li>
                            <li><a href="">Active</a>
                            </li>
                            <li>
                                {/* <!-- :className="{selected: visibility == 'Completed'} --> */}
                                <a href="">Completed</a>
                            </li>
                        </ul>
                        <button className="clear-completed">
                            Clear completed
                        </button>
                    </footer>

                </section>
            </div>
        )
    }
}
export default TodoList